<template>
    <div class="container">
        <el-row>
            <el-card shadow="never">
                <div slot="header">
                    <el-form :inline="true" size="small">
                        <el-form-item class="el-search-item">
                            <el-button v-if='hasPerm("sys:operatorLog:search")' type="primary" plain icon="el-icon-search" @click="openSearchDialog">查询</el-button>
                        </el-form-item>
                        <el-form-item class="el-search-item">
                            <el-button v-if='hasPerm("sys:operatorLog:batchdel")' type="danger" plain icon="el-icon-delete" @click="batchDeleteBtn">批量删除</el-button>
                        </el-form-item>
                        <el-form-item class="el-search-item">
                            <el-button type="success" plain icon="el-icon-printer">导出记录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--数据表格-->
                <el-table :data="tableData" :height="tableHeight" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
                    <el-table-column prop="title" label="标题" align="center" width="150" sortable></el-table-column>
                    <el-table-column prop="requestUserName" label="账号" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="requestMethodName" label="方法名称" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="requestMethodType" label="请求方式" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="requestUrl" label="请求地址" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="requestIp" label="IP" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="requestParam" label="请求参数" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="responseParam" label="响应参数" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="errorInfo" label="错误信息" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="businessType" label="操作类型" fixed="right" align="center" width="80">
                        <template slot-scope="scope">
                            <el-button size="mini" round type="primary" v-if="scope.row.businessType === 'insert'">添加</el-button>
                            <el-button size="mini" round type="success" v-if="scope.row.businessType === 'update'">修改</el-button>
                            <el-button size="mini" round type="danger" v-if="scope.row.businessType === 'delete'">删除</el-button>
                            <el-button size="mini" round type="danger" v-if="scope.row.businessType === 'batch_delete'">批量删除</el-button>
                            <el-button size="mini" round type="info" v-if="scope.row.businessType === 'other'">其它</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" fixed="right" align="center" width="80">
                        <template slot-scope="scope">
                            <el-button size="mini" round type="primary" v-if="scope.row.status === 1">正常</el-button>
                            <el-button size="mini" round type="danger" v-if="scope.row.status === 2">异常</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-if='hasPerm("sys:operatorLog:del")' label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button v-if='hasPerm("sys:operatorLog:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页组件-->
                <el-pagination
                    style="padding: 20px 0 0 0;text-align: center;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[8, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-card>
            <!--检索弹框-->
            <el-drawer
                :title="dialog.dialogTitle"
                :visible.sync="dialog.visible"
                :direction="dialog.direction"
                :size="size">
                <el-row class="drawer-table">
                    <el-col :span="24">
                        <el-form :model="searchForm" size="small" label-width="80px">
                            <el-form-item label="操作标题">
                                <el-input v-model="searchForm.title" placeholder="操作标题" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="操作账号">
                                <el-input v-model="searchForm.requestUserName" placeholder="操作员" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="操作类型">
                                <el-select v-model="searchForm.businessType" clearable placeholder="操作类型" style="width: 100%">
                                    <el-option label="添加" value="insert"></el-option>
                                    <el-option label="更新" value="update"></el-option>
                                    <el-option label="删除" value="delete"></el-option>
                                    <el-option label="批量删除" value="batch_delete"></el-option>
                                    <el-option label="其它" value="other"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="请求方式">
                                <el-select v-model="searchForm.requestMethodType" clearable placeholder="请求方式" style="width: 100%">
                                    <el-option label="POST" value="POST"></el-option>
                                    <el-option label="PUT" value="PUT"></el-option>
                                    <el-option label="DELETE" value="DELETE"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="操作状态">
                                <el-select v-model="searchForm.status" clearable placeholder="操作状态" style="width: 100%">
                                    <el-option label="正常" :value=1></el-option>
                                    <el-option label="异常" :value=2></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <el-row class="drawer-footer">
                    <el-col :span="24">
                        <el-button @click="dialog.visible = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="getDataList()" size="small">检索</el-button>
                    </el-col>
                </el-row>
            </el-drawer>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 弹出层大小
            size: '25%',
            // 表格数据
            tableData: [],
            // 分页数据
            total: 0,
            pageNum: 1,
            pageSize: 8,
            // 表格高度
            tableHeight: 0,
            // 查询参数
            searchForm: {
                title: null,
                requestUserName: null,
                businessType: null,
                requestMethodType: null,
                status: null,
            },
            // 弹出层
            dialog:{
                flag: 0,
                dialogTitle: "",
                visible: false,
                direction: 'rtl'
            },
            selectionList:[],
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 255;
        });
    },
    created() {
        this.getDataList()
    },
    methods: {
        // 检索按钮操作
        openSearchDialog() {
            this.dialog.dialogTitle = "检索操作日志"
            this.dialog.visible = true
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getDataList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getDataList()
        },
        // 获取操作日志列表
        getDataList() {
            this.$api.user.getOperatorLogList({
                current: this.pageNum,
                size: this.pageSize,
                title: this.searchForm.title,
                requestUserName: this.searchForm.requestUserName,
                businessType: this.searchForm.businessType,
                requestMethodType: this.searchForm.requestMethodType,
                status: this.searchForm.status
            }).then(res => {
                if(res.data.code === 2000) {
                    this.tableData = res.data.data.records
                    this.total = res.data.data.total
                }
            })
        },
        // 删除按钮操作
        deleteFun(row) {
            this.$confirm("确定删除当前操作日志吗？", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: 'error'
            }).then(() =>{
                this.$api.user.removeOperatorLog(row.id).then(res => {
                    if(res.data.code === 2000){
                        this.$message.success(res.data.msg)
                        this.getDataList()
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {
                this.$message.info("取消删除")
            });
        },
        // 批量选中
        handleSelectionChange(selection){
            this.selectionList = []
            selection.forEach(element => {
                this.selectionList.push(element.id)
            });
        },
        // 批量删除
        batchDeleteBtn() {
            if(this.selectionList.length <= 0) {
                this.$message.warning("请选择要删除的数据")
            }else {
                this.$confirm("确定删除当前操作日志吗？", "系统提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: 'error'
                }).then(() =>{
                    this.$api.user.bathRemoveOperatorLog(this.selectionList).then(res => {
                        if(res.data.code === 2000){
                            this.$message.success(res.data.msg)
                            this.getDataList()
                        }else {
                            this.$message.error(res.data.msg)
                        }
                    })
                }).catch(() => {
                    this.getDataList()
                    this.$message.info("取消删除")
                });
            }
        }
    }
}
</script>

<style lang="less" scoped>
.el-search-item {
    margin-bottom: 0;
}
.el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
}
.el-card/deep/.el-card__header {
    border-bottom: none !important;
}

</style>
